<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>疫情大数据</title>
    <script src="../js/echarts.js"></script>
    <!--    <script src="js/echarts.js/echarts.min.js"></script>-->
    <script src="../js/china.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #main {
            width: 600px;
            height: 450px;
            margin: 150px auto;
            border: 1px solid #ddd;
        }

        /*默认长宽比0.75*/
        .center {
            margin: auto;
            width: 70%;
        }
    </style>
    <style>
        .el-header {
            background-color: #ffffff;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        .box-card {
            width: 1000px;
        }

    </style>


</head>
<body>

<div id="app" >
    <div id="covid_all" class="center">
        <h2 align="center">实时疫情大数据平台</h2>
        <table class="table table-bordered" bgcolor="#b0e0e6">
            <thead>
            <tr>
                <th>
                    时间
                </th>
                <th>
                    现存确诊
                </th>
                <th>
                    累计确诊
                </th>
                <th>
                    现存疑似
                </th>
                <th>
                    累计治愈
                </th>
                <th>
                    累计死亡
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="datetime">1</td>
                <td id="currentConfirmedCount">1</td>
                <td id="confirmedCount">1</td>
                <td id="suspectedCount">1</td>
                <td id="curedCount">1</td>
                <td id="deadCount">1</td>
            </tr>
            </tbody>
        </table>
    </div>
    <!--侧边框-->
    <el-container style="height: 700px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']" @open="handleOpen" @close="handleClose">
                <el-menu-item index="1" @click="btn1()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">全国地图</span>
                </el-menu-item>
                <el-menu-item index="2" @click="btn2()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">时间趋势折线图</span>
                </el-menu-item>
                <el-menu-item index="3" @click="btn3()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">境外输入饼图</span>
                </el-menu-item>
                <el-menu-item index="4" @click="btn4()">
                    <i class="el-icon-menu"></i>
                    <span slot="title">救援物资</span>
                </el-menu-item>

            </el-menu>
        </el-aside>
        <!--装容器正文部分-->
        <el-main>
            <!--                <el-card class="box-card">-->
            <div id="all" style="width: 1500px;height:600px;" class="center"></div>
            <!--                </el-card>-->
        </el-main>
        <!--        </el-container>-->
    </el-container>
</div>


<!--<div id="map_all" style="width: 1500px;height:600px;" class="center"></div>-->
<!--    <br>-->
<!--    <hr>-->
<!--<div id="time_line" style="width: 1500px;height:600px;" class="center"></div>-->
<!--    <br>-->
<!--    <hr>-->
<!--<div id="import_pie" style="width: 1500px;height:600px;" class="center"></div>-->
<!--    <br>-->
<!--    <hr>-->
<!--<div id="covid19_wz" style="width: 1500px;height:600px;" class="center"></div>-->
</body>

<script type="text/javascript">



    new Vue({
        el: "#app",
        mounted(){
            /*--------------------全国地图-----------------------------*/
            var dataList=[
                {name: '北京', value: 100},
                {name: '上海', value: randomValue()}
            ]
            // 基于准备好的dom容器，初始化ECharts实例
            var myMapChart = echarts.init(document.getElementById('all'));
            function randomValue() {
                return Math.round(Math.random()*1000);
            }
            myMapChart.setOption({
                title: {
                    text: '全国疫情地图'
                },
                tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }
                },
                visualMap: {
                    min: 0,
                    max: 1500,
                    left: 'left',
                    top: 'bottom',
                    text: ['多','少'],
                    inRange: {
                        color: ['#ffe5bf', '#ffa372', '#ff7e86','#ee1216','#B22222']
                    },
                    show:true
                },
                geo: {
                    map: 'china',
                    roam: true,//不开启缩放和平移
                    zoom:1.23,//视角缩放比例
                    label: {
                        normal: {
                            show: true,
                            fontSize:'10',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal:{
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis:{
                            areaColor: '#AEEEEE',//鼠标悬停区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                series : [
                    {
                        name: '累计确诊',
                        type: 'map',
                        geoIndex: 0,
                        data:dataList

                    }
                ]
            });

            myMapChart.on('click', function (params) {
                alert(params.name);
            });

            setTimeout(function () {
                // 异步加载json格式数据
                $.getJSON('http://localhost:8080/covid/getNationalMapData', function(data) {
                    myMapChart.setOption({
                        series: [{
                            data: data.data
                        }]
                    });
                });
            }, 1000)
        },
        methods: {
            btn1() {
                window.location.href = " html1.html " ;
            },
            btn2() {
                window.location.href = " html2.html " ;
            },
            btn3() {
                window.location.href = " html3.html " ;
            },
            btn4() {
                window.location.href = " html4.html " ;
            }

        }
    })

    /*--------------------全国统计数据-----------------------------*/
    $.getJSON("http://localhost:8080/covid/getNationalData", function (data) {
        var map = data.data
        $("#datetime").html(map.datetime)
        $("#currentConfirmedCount").html(map.currentConfirmedCount)
        $("#confirmedCount").html(map.confirmedCount)
        $("#suspectedCount").html(map.suspectedCount)
        $("#curedCount").html(map.curedCount)
        $("#deadCount").html(map.deadCount)
    })









</script>
</html>